<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html,body{margin:0;padding:0;}
  </style>
</head>
<body>
  
</body>
<script type="importmap">
  {
		"imports": {
			"three": "../build/three.module.js",
      "OrbitControls": "../examples/jsm/controls/OrbitControls.js",
      "gui":"../examples/jsm/libs/lil-gui.module.min.js"
		}
	}
</script>
<script type="module">
  import * as THREE from 'three';
  // 引入相机轨道控制器
  import { OrbitControls } from 'OrbitControls';

  // 创建场景
  const scene = new THREE.Scene()

  // 创建透视相机：具备近大远小
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // =========

  const group = new THREE.Group();

  // 创建多个几何体
  const geometry = new THREE.BoxGeometry(2, 0.2, 2);
  const food1 = new THREE.BoxGeometry(0.2, 2, 0.2);
  const food2 = new THREE.BoxGeometry(0.2, 2, 0.2);
  const food3 = new THREE.BoxGeometry(0.2, 2, 0.2);
  const food4 = new THREE.BoxGeometry(0.2, 2, 0.2);
  // 设置材质
  const material = new THREE.MeshLambertMaterial({
      color: 0xff6600
  })
  // 创建网格模型（将几何体和材质结合）
  const cube = new THREE.Mesh(geometry,material );
  const cube1 = new THREE.Mesh(food1, material );
  const cube2 = new THREE.Mesh(food2, material );
  const cube3 = new THREE.Mesh(food3, material );
  const cube4 = new THREE.Mesh(food4, material );

  cube.name = "面";
  cube1.name = "腿1";
  cube2.name = "腿2";
  cube3.name = "腿3";
  cube4.name = "腿4";

  group.add(cube); // 把网格模型 添加到场景中
  group.add(cube1); // 把网格模型 添加到场景中
  group.add(cube2); // 把网格模型 添加到场景中
  group.add(cube3); // 把网格模型 添加到场景中
  group.add(cube4); // 把网格模型 添加到场景中

  // 调整各个网格模型的位置
  geometry.translate(0, 2, 0);
  food1.translate(0.8, 1, 0.8);
  food2.translate(-0.8, 1, 0.8);
  food3.translate(0.8, 1, -0.8);
  food4.translate(-0.8, 1, -0.8);

  // 分组之后，对组对象的操作
  group.position.x = 3;
  
  // console.log(group);
  // console.log(cube4);
  // 将组对象添加到场景
  scene.add(group);

  // 通过名字获取到对应的模型
  const o = scene.getObjectByName("面");
  // console.log(o);
  // 操作获取到的模型
  o.rotateY(0.5);

  // =========

  // 修改相机位置
  camera.position.z = 5;

  // 创建坐标系辅助器
  const axesHelper = new THREE.AxesHelper(150);
  scene.add(axesHelper);
  // 创建辅助线（地面）
  const gridHelper = new THREE.GridHelper(10,10);
  scene.add(gridHelper);

  // 创建光源
  const pointLight = new THREE.PointLight(0xffffff, 1.0);
  // 设置位置
  pointLight.position.set(100, 20, 20);
  scene.add(pointLight);
  // 创建光源辅助器
  const pointLightHelper = new THREE.PointLightHelper(pointLight, 20);
  scene.add(pointLightHelper);

  // 将3D场景和相机都添加到渲染器中（在canvas内绘制）
  renderer.render( scene, camera );

  // 创建 相机控件轨道控制器 实例
  const controls = new OrbitControls( camera, renderer.domElement );
  // 监听相机轨道改变事件
  controls.addEventListener('change',()=>{
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    // 执行渲染操作
    renderer.render(scene, camera);
  })


</script>
</html>